<template>
  <div class="home">
    <el-container>
      <SideMenu></SideMenu>
      <el-container>
        <el-header><Header></Header></el-header>
        <el-main>
          <Tab></Tab>
<<<<<<< HEAD
          <el-card shadow="never">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
=======
          <el-card shadow="always" style="margin-top: 10px">
            <transition name="fade-transform" mode="out-in">
              <router-view></router-view>
            </transition>
>>>>>>> c90ca6f6edfb84fe54655fa82bb244498a7f6cd7
          </el-card>
          <div class="footer">
            <span>Copyright ©2021 南京师范大学 All Rights Reserved</span>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./header/header.vue";
import SideMenu from "./sideMenu/sideMenu.vue";
import Tab from "./main/tab.vue";
export default {
  name: "Home",
  components: {
    Header,
    SideMenu,
    Tab,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
  padding: 0;
  margin: 0;
}
.el-header {
  // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  background-color: #4b5774;
  color: #eee;
  text-align: center;
  line-height: 60px;
}
.el-main {
  padding: 0;
  margin: 0;
}
body > .el-container {
  margin-bottom: 40px;
}
.footer {
  height: 4rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  // background-image: linear-gradient(-90deg, rgb(179, 174, 174) 0%, #222 100%);
  background-color: #4b5774;
  display: flex;
  align-items: center;
  z-index: 999;
  span {
    color: #fff;
    margin-left: 2rem;
  }
}
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
